<template>
	<div>
		<h1
			:style="{
				textAlign: 'center',
				margin: '0 auto 1rem auto'
			}"
		>
			个人信息
		</h1>
		<a-layout class="user-view">
			<!-- 中心修改个人内容 -->
			<a-layout-content class="user-view-content">
				<a-tabs :position="position">
					<a-tab-pane key="1" title="修改个人信息">
						<a-form
							:model="userInfo"
							@submit="handleSubmit"
							:layout="layout"
						>
							<a-form-item field="name" label="用户名">
								<a-input
									v-model="userInfo.username"
									:disabled="true"
								/>
							</a-form-item>
							<a-form-item field="sex" label="性别">
								<a-radio-group v-model="userInfo.userSex">
									<a-radio value="男">男</a-radio>
									<a-radio value="女">女</a-radio>
								</a-radio-group>
							</a-form-item>
							<a-form-item field="mail" label="电子邮箱">
								<a-input v-model="userInfo.userMail" />
							</a-form-item>
							<a-form-item field="phone" label="手机号码">
								<a-input v-model="userInfo.userPhone" />
							</a-form-item>
							<a-form-item field="birthday" label="生日">
								<a-date-picker
									style="width: 200px"
									v-model="userInfo.userBirthday"
								/>
							</a-form-item>
							<a-form-item field="bio" label="个人简介">
								<a-textarea
									placeholder="Please enter something"
									:max-length="150"
									allow-clear
									show-word-limit
									v-model="userInfo.userBio"
								/>
							</a-form-item>
							<a-form-item>
								<a-button
									status="warning"
									html-type="submit"
									:disabled="!isChange"
									>修改</a-button
								>
							</a-form-item>
						</a-form>
					</a-tab-pane>
					<a-tab-pane key="2" title="修改密码">
						<a-form
							:model="changePassModel"
							@submit="changePassword"
							:layout="layout"
						>
							<a-form-item field="mail" label="电子邮箱">
								<a-input
									v-model="changePassModel.userMail"
									placeholder="Please enter you Mail"
								/>
							</a-form-item>
							<a-form-item field="phone" label="手机号码">
								<a-input
									v-model="changePassModel.userPhone"
									placeholder="Please enter you PhoneNumber"
								/>
							</a-form-item>
							<a-form-item field="phone" label="新密码">
								<a-input-password
									v-model="changePassModel.rePassword"
									:style="{ width: '320px' }"
									placeholder="Please enter you new Password"
									allow-clear
								/>
							</a-form-item>
							<a-form-item>
								<a-button
									status="warning"
									html-type="submit"
									:disabled="!isPasswdChange"
									>修改</a-button
								>
							</a-form-item>
						</a-form>
					</a-tab-pane>
					<a-tab-pane key="3" title="发送站内信">
						<a-form
							:model="mailModel"
							@submit="sendMail"
							:layout="layout"
						>
							<a-form-item field="title" label="标题">
								<a-input
									placeholder="Please enter title"
									v-model="mailModel.title"
								/>
							</a-form-item>
							<a-form-item
								field="toUserName"
								label="接收人用户名"
							>
								<a-input
									placeholder="Please enter toUserName"
									v-model="mailModel.toUserName"
								/>
							</a-form-item>
							<a-form-item field="context" label="内容">
								<a-textarea
									placeholder="Please enter something"
									:max-length="300"
									allow-clear
									show-word-limit
									v-model="mailModel.context"
								/>
							</a-form-item>
							<a-form-item>
								<a-space>
									<a-button
										status="success"
										html-type="submit"
										>发送</a-button
									>
									<a-button
										status="warning "
										html-type="reset"
										>重置</a-button
									>
								</a-space>
							</a-form-item>
						</a-form>
					</a-tab-pane>
				</a-tabs></a-layout-content
			>
			<!-- 侧边区域 -->
			<a-layout-sider width="300px">
				<div class="sider-box">
					<h3>个人头像</h3>
					<a-upload
						:auto-upload="true"
						@success="changeAvatar"
						:custom-request="avatarUpload"
						:show-file-list="false"
						class="upload-box"
					>
						<template #upload-button>
							<a-avatar
								:imageUrl="avatarUrl"
								:size="200"
								@error="avatarLoadErr"
								:custom-request="avatarUpload"
								v-if="avatarShow && userInfo.userAvatar"
							></a-avatar>
							<a-avatar :size="200" v-else>{{
								userInfo.username
							}}</a-avatar>
						</template>
					</a-upload>
				</div>
			</a-layout-sider>
		</a-layout>
	</div>
</template>

<script setup>
import {
	getUserInfo,
	changeInfo,
	setChangePassword,
	setAvatarUpload,
	setSendMail
} from '../../api/users'
import { useUserStore } from '../../store/user'

const userStore = useUserStore()

const userInfo = ref({})
const changePassModel = ref({
	userMail: '',
	userPhone: '',
	rePassword: ''
})
const mailModel = ref({
	toUserName: '',
	title: '',
	context: ''
})

const avatarUrl = ref('')
const avatarShow = ref(true)
const layout = ref('vertical')
const position = ref('left')
const isChange = ref(false)
const isPasswdChange = ref(false)
// 初始化数据
getUserInfo().then(res => {
	userInfo.value = res
	avatarUrl.value = res.userAvatar
	userStore.update('userInfo', res)
	setWatch(userInfo, isChange)
	setWatch(changePassModel, isPasswdChange)
})

// 设置深度监听数据源
function setWatch(root, isShow) {
	return watch(
		() => root,
		() => {
			isShow.value = true
			console.log('值已被修改', root)
		},
		{ deep: true }
	)
}
// 修改个人信息
function handleSubmit() {
	changeInfo(userInfo.value).then(res => {
		userStore.update('userInfo', res.new_user)
		AMessage.success(res.message)
		isChange.value = false
	})
}
// 根据固定信息修改密码
function changePassword() {
	setChangePassword(changePassModel.value).then(() => {
		isPasswdChange.value = false
	})
}
// 头像加载出错回调
function avatarLoadErr() {
	AMessage.error('头像加载出错')
	avatarShow.value = false
}
// 上传头像
function avatarUpload(fileItem) {
	setAvatarUpload(fileItem).then(res => {
		localStorage.setItem('avatarUrl', res.userAvatar)
		userInfo.value = res
		location.reload()
	})
}
// 发送站内信
function sendMail() {
	setSendMail(mailModel.value)
}
</script>

<style lang="scss" scoped>
h1 {
	color: var(--fc-bg);
}
.user-view {
	width: 1280px;
	margin: 0 auto;
	display: flex;
	justify-content: center;
	padding: var(--normal-distance);
	background-color: var(--main-2-bg);
	border-radius: 10px;
	.user-view-content {
		padding: 2em;
	}
	.sider-box {
		width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		.upload-box {
			width: 100%;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			overflow: hidden;
		}
	}
}
:deep(.arco-layout-sider.arco-layout-sider-light) {
	background-color: var(--main-bg);
	color: var(--fc-bg);
}
:deep(.arco-textarea-wrapper) {
	background-color: var(--main-bg);
}
:deep(.arco-tabs-tab-title),
:deep(.arco-form-item-label) {
	color: var(--fc-bg);
}
</style>
